import React from 'react';
import {Text, ImageBackground, HStack} from "@gluestack-ui/themed";
import type {ApplicationScreenProps} from "@/types/navigation";
import {cidAccountManage} from "@/theme/enums/columns";
import {useTheme} from "@/hooks";
import DateScreen from "@/screens/tabbar/components/DateScreen";
import {Table} from "@/components/k-view";
import {TableColumn} from "@/components/k-view/table/types";
import {ImmerseScreen, StatusBarView} from "@/components/template";

const AccountManage = ({navigation, route}: ApplicationScreenProps) => {
    const {layout} = useTheme();
    const [columns, setColumns] = React.useState<TableColumn[]>(cidAccountManage);
    console.log("环境变量", process.env)
    return (
        <ImmerseScreen>
            <ImageBackground
                resizeMode="cover"
                resizeMethod="scale"
                style={[layout.fullWidth, layout.flex_1]}
                source={{uri: "https://ots.chengziweb.cn/mobile-bg-img.png"}}
            >
                <StatusBarView></StatusBarView>
                <DateScreen></DateScreen>
                <Table columns={columns}>
                    {{
                        header: {
                            advertiserName: () => <Text>自定义1</Text>,
                        },
                        body: {
                            advertiserName: () => <Text>自定义</Text>,
                            operation: () => (
                                <HStack space="xs" style={[layout.justifyCenter]}>
                                    <Text color="#3554DC" size="sm" fontWeight="bold">查看</Text>
                                    <Text color="#3554DC" size="sm" fontWeight="bold">订单</Text>
                                </HStack>
                            )
                        }
                    }}
                </Table>
            </ImageBackground>
        </ImmerseScreen>
    );
};

export default AccountManage;